<template>
  <div class="chart-main-header">
    <!-- {{ queryInfo }} -->
    <el-card>
      <el-form inline size="mini" class="chart-main-header-form">
        <el-form-item>
          <el-cascader
           
            :show-all-levels="false"
            clearable
            filterable
            placeholder=""
          >
          </el-cascader>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="queryInfo.salesTime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button class="el-icon el-icon-search" 
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>

export default {
  data() {
    return {
      goodsTypes: [], 
      queryInfo: {
        goodstypeid: [],
        salesTime: [],
      },
      pickerOptions: {
        shortcuts: [  
        ],
      },
    };
  },
  
  methods: {

  }
};
</script>

<style scoped>
.chart-main-header {
  width: 99%;
  height: 60px;
  margin: 0 auto 10px;
}
.chart-main-header-form {
  width: 700px;
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
}
.el-card {
  height: 100%;
}
.el-date-editor.el-range-editor--mini.el-input__inner {
  height: 30px;
}
</style>
